<template>
  <div>
    <el-header class="el-header2" height="35px">
      <el-breadcrumb
        style="margin-left: 10px"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>财务报表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-card style="height: 600px"
      ><el-card class="mycard1">
        <h3>商品盈利详情</h3>
        <el-divider></el-divider>
        <h4>截止</h4>
        <em>{{ mydate }}/</em>
        <br />
        <br />
        <i class="el-icon-s-marketing" /> 商品累计 <strong>销售额</strong> 如右
        <br />
        <br />
        <i class="el-icon-info" /> 商品 利润 如图
      </el-card>

      <div id="myChart" :style="{ width: '550px', height: '450px' }"></div
    ></el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      profit: 0,
      show: null,
    };
    // this.getAllPowers();
  },
  created() {
    this.getProfit();
  },
  computed: {
    mydate: function () {
      const str = new Date().toLocaleString();
      return str;
    },
  },
  methods: {
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    async getProfit() {
      const { data } = await this.axios({
        method: "get",
        url: "/order/profit/",
      });
      console.log(data);
      this.mysort(data);
    },

    mysort(data) {
      var sorted2 = this.groupBy(data, function (data) {
        return [data.goods_name];
      });
      sorted2.map((item) => {
        item["goods_name"] = item[0]["goods_name"];
        item["value"] = item.length * (item[0].order_price - item[0].old_price);
      });
      // 计算利润
      this.profit = sorted2;
      console.log("profit", this.profit);
    },

    // groupby
    groupBy(array, f) {
      // debugger;
      var groups = {};
      array.forEach(function (o) {
        var group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map(function (group) {
        return groups[group];
      });
    },

    async drawLine() {
      // let self = this;
      await this.getProfit();
      let lineX = [];
      let lineY = [];
      this.show = { lineX: lineX, lineY: lineY };
      this.profit.forEach((item) => {
        lineX.push(item.goods_name);
        lineY.push(item.value);
      });

      let myChart = this.$echarts.init(document.getElementById("myChart"));
      var option;

      option = {
        title: {
          text: "商品盈利详情",
          left: "center",
          // bottom: 0,
          textStyle: {
            fontSize: 20,
          },
        },
        grid: {
          x: 80,
        },
        xAxis: {
          type: "category",
          data: lineX,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}(元)",
          },
        },
        series: [
          {
            data: lineY,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3C76F4", //改变折线点的颜色
                label: { show: true }, //顶部显示数值
                lineStyle: {
                  color: "#3C76F4", //改变折线颜色
                },
              },
            },
          },
        ],
        // toolbox: {
        //   feature: {
        //     myTool1: {
        //       show: true,
        //       title: "导出",
        //       icon:
        //         "path://M938.855808 638.776382l0 270.299169c0 27.41028-22.210861 49.634444-49.621141 49.634444l-754.442728 0c-27.41028 0-49.647747-22.224164-49.647747-49.634444L85.144192 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444s49.634444 22.224164 49.634444 49.634444l0 220.664725 655.17384 0L839.58692 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444S938.855808 611.366102 938.855808 638.776382zM476.55165 701.027168c9.335622 9.534144 22.116717 14.905478 35.46063 14.905478 13.344936 0 26.121937-5.371334 35.461653-14.905478l198.014866-202.167442c19.179828-19.583011 18.85544-51.006697-0.732687-70.190619-19.587104-19.175735-51.016931-18.85544-70.196759 0.731664l-112.924909 115.285676L561.634444 114.924449c0-27.41028-22.224164-49.634444-49.634444-49.634444-27.41028 0-49.634444 22.224164-49.634444 49.634444l0 429.754834L349.473393 429.40077c-19.179828-19.583011-50.590212-19.902282-70.186526-0.731664-19.583011 19.179828-19.910469 50.603515-0.730641 70.190619L476.55165 701.027168z",
        //       onclick: function () {
        //         // alert('myToolHandler1')
        //         console.log(self.show);
        //         let tHeader, filterVal, list;
        //         // console.log(self.chartData)
        //         // console.log(list)
        //         tHeader = ["商品", "利润"];
        //         filterVal = ["goods_name", "value"];
        //         list = self.show;
        //         console.log(list);

        //         const data = self.formatJson(filterVal, list);
        //         // console.log(data)
        //         import("@/vendor/Export2Excel").then((excel) => {
        //           excel.export_json_to_excel({
        //             header: tHeader,
        //             data,
        //             filename: "报表",
        //           });
        //         });
        //       },
        //     },
        //   },
        // },
      };

      option && myChart.setOption(option);
    },
  },

  mounted() {
    this.drawLine();
  },
};
</script>

<style lang="scss" scoped>
#myChart {
  // position: relative;
  // // left: 1000px;
  // margin: 0 auto;
  // display: flex;
  // justify-items: center;
  // align-items: center;
  margin: 0 auto;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  transform: translate(-1%, 10%);
}
.mycard1 {
  position: absolute;
  width: 300px;
  height: 300px;
}
</style>
